<template>
    <span class="inputLabel">路由编码</span>
    <el-input v-model="apiCacheSearchData.code" placeholder="路由编码" class="searchInfoInput"></el-input>

    <span class="inputLabel">微服务</span>
    <el-select v-model="apiCacheSearchData.applicationName" placeholder="微服务" class="searchInfoInput" clearable>
        <el-option :label="item.applicationName" :value="item.applicationName" v-for="item in applicationList" :key="item.id"/>
    </el-select>

    <el-button type="primary" icon="SearchOutlined" class="searchButtonClass" :loading="searchLoading" @click="queryApiCacheInfo()">搜索</el-button>
    <el-button icon="RedoOutlined" @click="resetInput()">重置</el-button>
</template>

<script>
import {apiRouteRedisCacheInfo} from "@/request/api";
import {applicationInfoQuery} from "@/request/service";

export default {
    name: "GatewayRedisCacheSearch",
    data() {
        return {
            applicationList: [],
            searchLoading: false
        }
    },
    computed: {
        apiCacheSearchData() {
            return this.$store.state.apiCacheSearchData;
        }
    },
    methods: {
        queryApiCacheInfo() {
            this.searchLoading = true
            apiRouteRedisCacheInfo(this.apiCacheSearchData).then(res => {
                if (res.code === '200') {
                    this.$store.commit('changeApiCacheDataList', res.data);
                }
                this.searchLoading = false
            }).catch(res => {
                this.searchLoading = false
            })
        },
        resetInput() {
            this.apiCacheSearchData.code = '';
            this.apiCacheSearchData.applicationName = '';
        }
    },
    created() {
        applicationInfoQuery(this.apiCacheSearchData).then(res => {
            if (res.code === '200') {
                this.applicationList = res.data;
            }
        })
    }
}
</script>

<style scoped lang="less">
.searchInfoInput {
    width: 15%;
    padding-left: 1%;
}
.inputLabel {
    padding-left: 1%;
    font-weight: 700;
    font-size: 15px;
    color: #606266;
}
.searchButtonClass {
    margin-left: 1%;
}
</style>